<!--
*@Author: QWP
*@Description: 已读状态
*@Date: 2025-01-16 15:36:15
-->
<template>
  <template v-if="group['types'] == 1">
    <u-popover placement="bottom"
      trigger="click">
      <span class="f-padding-rl6" 
        v-if="data['charPosition'] == 'right' && isReaded"
        style="color: #1890ff;">
        未读
      </span>
  
      <template #content>
        <div class="f-flex-row u-read-record">
          <div class="u-record-item f-flex-column"
            v-for="item in readRecord">
            <div class="u-title f-flex-row">
              <b>{{ item.total }}</b>
              <span>{{ item.label }}</span>
            </div>
            <div class="u-record-content">
              <div class="f-padding-8 u-user-name" v-for="user in item.datas">
                {{ user.username }}
              </div>
            </div>
          </div>
        </div>
      </template>
    </u-popover>
  </template>
  <template v-else-if="group['types'] == 2">
    <span class="f-padding-rl6" 
      v-if="data['charPosition'] == 'right' && isReaded"
      style="color: #1890ff;">
        未读
      </span>
  </template>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 
import { useLoginStore, useChatStore } from '@/store'
import { storeToRefs } from 'pinia'
import { alertC, messageC } from '@/util/common'
import * as chatApi from '@/service/emergency/chat'
import dayjs from 'dayjs'

const props = defineProps<{
  group: object,
  data: object,
  userList?: any[]
}>()

const { userInfo } = storeToRefs(useLoginStore())

// 是否已读
const isReaded = computed(() => {
  try {
    const readBy = props.data['readBy'] || []
    const readList = readBy instanceof Array ? readBy : readBy.replace(/\[*\]*/g, '').split(',');
    const { types } = props.group;
    // 个人
    if(types == '2') {
      return readList.length == 0
    }
    // 群聊
    else if(types == '1') {
      return readList.length != props.userList.length
    }
  } catch (error) {}
  return true
})

const readRecord = computed(() => {
  const readBy = props.data['readBy'] || []
  const readList = (readBy instanceof Array ? readBy : readBy.replace(/\[*\]*/g, '').split(','))
                  .filter(i => i != userInfo.value['userId']);
  return [
    {
      label: '已读',
      total: readList.length,
      datas: props.userList.filter(i => readList.includes(i.userId) && i.userId != userInfo.value['userId'])
    },
    {
      label: '未读',
      total: props.userList.length - readList.length - 1,
      datas: props.userList.filter(i => !readList.includes(i.userId) && i.userId != userInfo.value['userId'])
    },
  ]
})
</script>

<style lang='scss' scoped>
.u-read-record {
  width: 200px;
  max-height: 200px;
  .u-record-item {
    width: 50%;
    padding: 0 6px;
    box-sizing: border-box;
    .u-title {
      align-items: baseline;
      b {
        padding-right: 4px;
        font-size: 22px;
      }
      span {
        font-size: 14px;
      }
    }
    &:first-child {
      border-right: 1px solid #eee
    }
  }
  .u-record-content {
    display: block;
    flex: 1;
    overflow: auto;
    .u-user-name {
      padding: 4px 0;
      font-size: 14px;
    }
  }
}
</style>